// Dark preview styling

#file-list {
  background-color: var(--grey-7);
  color:white;
  box-shadow: inset -14px 2px 54px -23px rgba(0,0,0,0.75);

  div.container {
    div.list-item {
      border-top-color: var(--grey-4);

    &.selected { background-color: var(--grey-6); }

      div.meta {
        .id, .tags, .directories, .files, .tex-indicator {
          background-color:var(--grey-4);
          color: var(--grey-0);
        }

        .date { color: var(--grey-3); }

        .tex-indicator { background-color: var(--c-primary); }

        .target-progress-indicator {
          circle { fill: var(--grey-4); }
          path { fill: var(--c-primary); }
        }
      }

      &.file:hover {
        // important is needed to not mess with the heatmap styles and
        // to overwrite the light theme
        background-color:var(--grey-6) !important;
        p.filename { color: white !important; }
      }

      &.directory {
        background-color:var(--grey-8);
        color: var(--c-primary-shade);

        .sorter .sortDirection, .sorter .sortType {
          background-color: var(--grey-8);
          &:hover { color: var(--grey-2); }
        }
      }
    }
  }

  .empty-file-list, .empty-directory { color:var(--grey-4); }
}
